/* methods */
import BizListViewMethods from '@src/component/business/BizListView/BizListViewMethods'
/* model */
import MsgModel from '@model/MsgModel'
/* vue */
import { VNode } from 'vue'
import { t } from '@src/locales'
import KeyCodeEnum from '@model/enum/KeyCodeEnum'
import { defaultTableData } from '@src/util/table'
class BizListViewRender<T, P> extends BizListViewMethods<T, P> {
  
  /**
   * @description: 渲染高级搜索按钮
   * @return {VNode}
   */  
  public renderAdvancedSearchButton(isNew = true): VNode {
    return isNew ? (
      <advanced-search
        ref="popperAdvancedSearchRef"
        fields={this.advanceSearchColumn}
        has-save={false}
        has-create={false}
        in-common-use={this.inCommonUse}
        onSearch={this.handleAdvancedSearch.bind(this)}
        onReset={this.resetSearchModel.bind(this)}
        onChangeCommonUse={this.changeCommonUse.bind(this)}
      >
      </advanced-search>
    ) : (
      <div
          class='advanced-search-btn pointer mar-l-10'
          onClick={() => this.toggleAdvancedSearchPanel()}
      >
        <i class='iconfont icon-filter task-mr4'></i>
        {t('component.advancedSearch.title')}
      </div>
    )
  }
  
  /**
   * @description: 渲染高级搜索面板
   * @return {VNode}
   */  
  public renderAdvancedSearchPanel(): VNode {
    const attrs = {
      props: {
        show: this.visibleAdvancedSearchPanel,
      },
      on: {
        'update:show': (value: boolean) => {
          this.visibleAdvancedSearchPanel = value
        }
      }
    }
    return (
      <base-search-drawer
        {...attrs}
        storageKey={this.advancedColumnNumberKey}
        onReset={() => this.resetSearch()}
        onSearch={() => {
          this.toggleAdvancedSearchPanel(false)
          this.onPaginationPageNumChangedHandler(1); 
        }}
        onGetColumnNum={(val: number) => this.columnNum = val}
        onChangeWidth={(columnNum: number) => this.setAdvanceSearchColumnWidth(columnNum)}
      >
        <base-search-panel 
          ref='BaseSearchPanelComponent' 
          columnNum={this.columnNum} 
          fields={this.advanceSearchColumn.filter(item=>item.fieldName !== "templateName")} 
        />
      </base-search-drawer>
    )
  }
  
  public renderDeleteButton(): VNode | null {
    if (!this.allowDelete) return null
    
    return (
      <el-button type="plain-third" onClick={() => this.deleteHandler()}>
        <i class='iconfont icon-delete task-font14'></i>
        {t('common.base.delete')}
      </el-button>
    )
  }
  
  /**
   * @description: 渲染更多操作下拉框
   * @return {VNode}
   */ 
  public renderMoreActionDropdown(): VNode | null {
    
    if (!this.allowExport) return null
    
    return (
      <el-dropdown>
        <div class='task-ai task-flex cur-point'>
          {t('common.base.moreOperator')}
          <i class="iconfont icon-fdn-select task-ml4"></i>
        </div>
        <div slot='dropdown'>
          { this.renderMoreActionDropdownMenu() }
        </div>
      </el-dropdown>
    )
  }
  
  /**
   * @description: 渲染更过操作下拉框菜单
   * @return {VNode}
   */
  public renderMoreActionDropdownMenu(): VNode {
    return (
      <el-dropdown-menu>
        {
          this.allowExport && (
            <el-dropdown-item>
              <div onClick={() => this.exportTask()}>{t('common.base.export')}</div>
            </el-dropdown-item>
          )
        }
        {
          this.allowExport && (
            <el-dropdown-item>
              <div onClick={() => this.exportTask(true)}>{t('common.base.exportAll')}</div>
            </el-dropdown-item>
          )
        }
        { this.renderMoreActionDropdownOtherMenu() }
      </el-dropdown-menu>
    )
  }
  
  /**
   * @description: 渲染更过操作下拉框其他菜单
   * @return {VNode}
   */ 
  public renderMoreActionDropdownOtherMenu(): null {
    return null
  }
  
  /**
   * @description: 渲染分页条
   * @param {Number} total 总条数
   * @return {VNode}
   */  
  public renderPaginationBar(total: number): VNode {
    return (
      <div ref="tableFooterContainer" class='table-footer bbx-normal-table-footer-12 pad-b-16 bg-w pad-t-16'>
        <div class="list-info" >
          
          <i18n path="common.base.table.totalCount">
            <span place="count" class="level-padding">{total || 0}</span>
          </i18n>
          
          { 
            this.multipleSelection && this.multipleSelection.length > 0 && 
            (
              <span>
                <i18n path="common.base.table.selectedNth">
                  <el-tooltip place="count" class="item" effect="dark" content={t('common.base.tip.clickViewDetail')} placement="top">
                    <span
                      class="color-primary pad-l-5 pad-r-5 cur-point"
                      onClick={()=>this.showBaseSelectionPanelComponent()}
                    >{ this.multipleSelection.length }</span>
                  </el-tooltip>
                </i18n>
                <span class="color-primary pad-l-5 cur-point" onClick={()=>this.toggleSelection()}>{t('common.base.clear')}</span>
              </span>
            )
          }
        </div>
        <el-pagination
          background
          pageSizes={defaultTableData.defaultPageSizes}
          onCurrent-change={(pageNum: number) => this.onPaginationPageNumChangedHandler(pageNum)}
          onSize-change={(pageSize: number) => this.onPaginationPageSizeChangedHandler(pageSize)}
          pageSize={this.searchParams.pageSize}
          currentPage={this.searchParams.pageNum}
          layout='prev, pager, next, sizes, jumper'
          total={total}
        >
        </el-pagination>
      </div>
    )
  }
  
  /**
   * @description: 渲染重置按钮
   * @return {VNode}
   */ 
  public renderResetButton(): VNode {
    return (
      <el-button type="plain-third" class='ml_12' onClick={() => this.resetSearch()}>
        {t('common.base.reset')}
      </el-button>
    )
  }
  
  /**
   * @description: 渲染已选择操作条组件
   * @return {VNode}
   */ 
  public renderSelectionOperationBar(): VNode | null {
    // if (!this.multipleSelection.length) return null
    
    return (
      <base-selection-bar
        ref='BaseSelectionBarComponent'
        value={this.multipleSelection}
        onInput={(value: any[]) => this.multipleSelection = value}
        onToggle-selection={() => this.toggleSelection()}
        onShow-panel={() => this.showBaseSelectionPanelComponent()}
      />
    )
  }

  /**
   * @description: 渲染已选择操作条
   * @return {VNode}
   */ 
  public renderSelectionPanelComponent(): VNode | null {
    return (
      <base-selection-panel
        ref='BaseSelectionPanelComponent'
        columns={this.baseSelectionPanelColumns}
        data={this.multipleSelection}
        tableRef={this.BizTableComponent?.TableComponent}
        onToggleSelection={() => this.toggleSelection()}
        onChange={(data: any) => this.multipleSelection = data}>
      </base-selection-panel>
    )
  }
  
  /**
   * @description: 渲染搜索按钮
   * @return {VNode}
   */ 
  public renderSearchButton(): VNode {
    return (
      <el-button class='search-input__append' type='primary' onClick={() => this.keyWordSearch()}>
        {t('common.base.search')}
      </el-button>
    )
  }
  
  /**
   * @description: 渲染选择列按钮
   * @return {VNode}
   */ 
  public renderSelectColumnsButton(): VNode {
    return (
      <div 
        class='el-dropdown-link task-ai task-flex cur-point mar-l-12' 
        onClick={() => this.toggleSelectColumnsDialog()}
      >
        {t('common.base.choiceCol')}
        <i class='iconfont icon-fdn-select task-ml4'></i>
      </div>
    )
  }
  
  /**
   * @description: 渲染选择列组件
   * @return {VNode | null }
   */   
  public renderSelectColumnComponent(): VNode | null {
    return (
      <biz-select-column 
        ref='BizSelectColumnComponent' 
        onSave={(value: { type: string, data: any[] }) => this.saveColumnStatus(value)} 
      />
    )
  }
  
  /**
   * @description: 渲染表格
   * @return {VNode}
   */  
  public renderTable() {
    return (
      <biz-table
        ref='BizTableComponent'
        data={this.page.list}
        columns={this.columns}
        onChangeSelection={(selection: any) => this.onChangeSelectionHandler(selection)}
        onSortChanged={(options: { prop?: any, order?: any }) => this.sortChangeHandler(options) }
      >
      </biz-table>
    )
  }
  
  /**
   * @description: 渲染导出组件
   * @return {VNode}
   */  
  public renderExportComponent(): VNode {
    return (
      <base-export
        ref='BaseExportComponent'
        storageKey={this.computedExportStorageKey}
        alert={(result: MsgModel<any>) => this.exportAlert(result)}
        columns={this.exportColumns}
        buildParams={(checkedArray: any[], ids: string[], exportOneRow?: boolean) => this.buildExportParams(checkedArray, ids, exportOneRow)}
        isDownloadFormMode={this.isExportDownloadFormMode}
        validate={(ids: string[], max: number) => this.checkExportCount(ids, max)}
        method='post'
        action={this.exportActionUrl}
      />
    )
  }
  
  /**
   * @description: 渲染搜索容器
   * @return {VNode}
   */ 
  public renderSearchContainer(): VNode {
    return (
      <div ref="tableSearchContainer" class='biz-list-view-search-container input-with-append-search'>
        <el-input
          class='search-input'
          placeholder={this.searchPlaceholder}
          value={this.searchParams.keyword}
          onInput={(value: string) => this.searchParams.keyword = value}
          nativeOnKeyup={(event: KeyboardEvent) => {
            // 回车搜索 (暂时先这么蠢)
            if (event.keyCode === KeyCodeEnum.Enter) {
              this.keyWordSearch()
            }
          }}
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
          <div slot='append'>
            { this.renderSearchButton() }
          </div>
        </el-input>
        { this.renderResetButton() }
      </div>
    )
  }
  
  /**
   * @description: 渲染头部容器
   * @return {VNode}
   */ 
  public renderHeaderContainer(): VNode {
    return (
      <div ref="tableFitlerContainer" class='common-list-header__v2'>
        { this.renderSearchContainer() }
        { this.renderAdvancedSearchButton() }
      </div>
    )
  }
  
  /**
   * @description: 渲染操作区域容器
   * @return {VNode}
   */ 
  public renderOperationContainer(): VNode {
    return (
      <div class='common-list-view__v2 mt_12 task-ai pad-b-none'>
        <div class='common-list-view-header__v2'>
          <div class='common-list-view-header__v2-left task-ai'>
          </div>
          <div class='common-list-view-header__v2-right task-ai'>
            { this.renderMoreActionDropdown() }
            { this.renderSelectColumnsButton() }
          </div>
        </div>
      </div>
    )
  }
  
  /**
   * @description: 渲染内容容器
   * @return {VNode}
   */ 
  public renderContentContainer(): VNode {
    const loading = this.getLoading()

    return (
      <div class='common-list-view__v2 mt_12 content-container pad-b-none'>
        {/* { this.renderSelectionOperationBar() } */}
        <div {...loading}>
          { this.renderTable() }
        </div>
        { this.renderPaginationBar(this.page.total || Number(this.page.totalElements)) }
      </div>
    )
  }
  
  /**
   * @description: 渲染其他组件容器
   * @return {VNode}
   */ 
  public renderComponentsContainer(): VNode {
    return (
      <div>
        { this.renderAdvancedSearchPanel() }
        { this.renderSelectColumnComponent() }
        { this.renderExportComponent() }
        { this.renderSelectionPanelComponent() }
      </div>
    )
  }
  
}

export default BizListViewRender
